<template>
  <div class="table">
    <p class="title">我的分数</p>
    <section class="content-el">
      <el-table ref="filterTable" :data="score" v-loading="loading">
        <el-table-column
            prop="answerDate"
            label="考试日期"
            sortable
            width="300"
            column-key="answerDate"
            :filters="filter"
            :filter-method="filterHandler">
        </el-table-column>
        <el-table-column
            prop="subject"
            label="课程名称"
            width="300"
            filter-placement="bottom-end">
          <template #default="scope">
            <el-tag>{{scope.row.subject}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="score" sortable label="考试分数" width="200"></el-table-column>
        <el-table-column label="是否及格" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.score >= 60 ? 'success' : 'danger'">{{scope.row.score >= 60 ? "及格" : "不及格"}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" align="middle" class="pagination">
        <el-config-provider :locale="zhCn">
          <el-pagination
              @size-change="pageSizeChange"
              @current-change="pageNumChange"
              :current-page="pagination.pageNum"
              :page-sizes="[3, 6, 9, 12]"
              :page-size="pagination.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.total">
          </el-pagination>
        </el-config-provider>
      </el-row>
    </section>
  </div>
</template>

<script>
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

export default {
  name: "scoreTable",
  setup(){
    let loading = ref(false) //加载标识符
    let filter = ref([]) //筛选参数
    let score = ref([])//学生成绩
    const {proxy} = getCurrentInstance()
    let pagination = reactive({
      pageNum: 1, //当前页
      total: Number(''), //记录条数
      pageSize: 5 //每页条数
    })
   function filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
   }
   function getScore(){
     // eslint-disable-next-line no-undef
     let studentId = $cookies.get("id")
     proxy.$axios.get(
         `/score/${pagination.pageNum}/${pagination.pageSize}/${studentId}`,
     ).then(
         response => {
           score.value = [...response.data.list]
           pagination.total = response.data.total
           pagination.pageNum = response.data.pageNum
           pagination.pageSize = response.data.pageSize
           let mapVal = score.value.map((element) => { //通过map得到 filter:[{text,value}]形式的数组对象
             let newVal = {}
             newVal.text = element.answerDate
             newVal.value = element.answerDate
             return newVal
           })
           let hash = []
           const newArr = mapVal.reduce((item, next) => { //对新对象进行去重操作
             hash[next.text] ? '' : hash[next.text] = true && item.push(next);
             return item
           }, []);
           filter.value = newArr
           loading.value = false //数据加载完
         },
         error => {
           console.log('请求失败', error.message)
         }
     )
   }

   onMounted(()=>{
     loading.value = true //数据加载
     getScore()
   })

   function pageSizeChange(value){//改变当前记录条数
      pagination.pageSize = value
      getScore()
   }
   function pageNumChange(value){//改变当前页码
      pagination.pageNum = value
      getScore()
   }
    return{
      filter,
      loading,
      score,
      pagination,
      getScore,
      filterHandler,
      pageSizeChange,
      pageNumChange,
      zhCn
    }
  },
}
</script>

<style scoped>
.pagination {
  padding-top: 20px;
  display: flex;
  justify-content: center;
}
.table {
  width: 980px;
  margin: 0 auto;
}
.title {
  margin: 20px;
  text-align: center;
  font-size: 20px;
  color: #2CD9D9FF;
  display: flex;
  justify-content: center;
}
.content-el {
  background-color: #fff;
  padding: 20px;
}

</style>